<template>
  <div>
      <h1>课程列表</h1>
      <!-- <table border="1" style="width:25%">
        <tr v-for="item in data" :key="item.id">
          <td>{{item.title}}</td>
          <td>{{item.price}}</td>
          <td><video width="200" height="120" :src="src+item.video" controls="controals" autoplay="autoplay"></video></td>
        </tr>
      </table> -->
      <!-- 表格控件 -->
      <van-grid>
        <van-grid-item v-for="item in data" :key="item.id">
          <router-link :to="{'path':'/courseinfo','query':{cid:item.id}}">{{item.title}}</router-link>
          <video width="200" height="120" :src="src+item.video" controls="controals" autoplay="autoplay"></video>
        </van-grid-item>
      </van-grid>
      <!-- 分页控件 -->
      <van-pagination @change='get_data' v-model='page' :total-items="total" :items-per-page="size" />

  </div>
</template>

<script>
export default {
  data(){
    return{
      data:[],
      page:1,
      size:1,
      total:0,
      src:'http://127.0.0.1:8000/static/upload/'
    }
  },
  mounted:function(){
    this.get_data();
  },
  methods:{
    get_data:function(){
      this.axios.post('http://127.0.0.1:8000/course_list',{'page':this.page,'size':this.size}).then(resp=>{
        console.log(resp.data)
        this.data = resp.data.data
        this.total = resp.data.total
      })
    }
  }
}
</script>

<style>

</style>